<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>大东电玩城后台操作系统</title>
		<script src="../../js/mui.min.js"></script>

		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link href="../../css/support.css" rel="stylesheet" />

		<link rel="stylesheet" type="text/css" href="../../css/iconfont.css" />
		<script src="../../js/support.js"></script>
		<script src="../../js/frame.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
	</head>

	<body>
		<div class="mui-content">
			<header id="wetitle" class="mui-bar mui-bar-nav"></header>
			<div class="mui-content mui-scroll-wrapper">
				<div id="weheader" ></div>
				
				<!--
					这里编辑具体内容
                -->
                <!--<div class="mui-table-view mui-card mui-row" style="margin: 10px; text-align: center; background: lightcyan">
					<h4>游戏公告</h4>
				</div>-->
				
				<ul class="mui-table-view mui-card" style="margin-bottom: 10px; margin-top: 10px;">
				    <li class="mui-table-view-cell mui-media mui-collapse">
				    	<a class="mui-slider-handle mui-table">
				        	<h4 class="mui-pull-left">新增公告</h4>
					        <div class="mui-icon mui-icon-plus-filled mui-pull-right"></div>
				       	</a>
				        <div class="mui-collapse-content">
							<div class="mui-input-row" style="margin: 10px 5px;">
								<textarea id="runningNoticeContent" rows="5" placeholder="公告内容"></textarea>
							</div>
							<button class="mui-btn mui-btn-block mui-btn-primary">提交</button>
						</div>
				    </li>
				</ul>
				
				<div id="noticeList" th:if="${data != null}">
					<ul class="mui-table-view mui-card mui-row" th:each="notice, noticeStat : ${data}">
					    <li th:attr="id=${notice.id}" class="mui-table-view-cell mui-media mui-collapse">
					        <a class="mui-slider-handle mui-table">
					        	<p th:text="${notice.name}" style="float: left; margin-left: 1px;">公告名称</p>
					        	<p th:text="${notice.createTime}" style="text-align: center;">2017年11月16日</p>
					        </a>
							<div class="mui-slider-right mui-disabled ">
								<a class="mui-btn mui-btn-red">×</a>
							</div>
					        <div class="mui-collapse-content">
								<p th:text="${notice.content}" class='mui-pull-left'>公告内容是摩擦摩擦，在那光滑的地方，摩擦！</p>
							</div>
					    </li>
					</ul>
				</div>
				<div id="wefooter"></div>
			</div>
		</div>


		<script type="text/javascript" charset="utf-8">
			support.tapbind(mui('#wefooter'));
			
			(function($){
				frame.title({
					node: document.getElementById("wetitle"), 
				});
				frame.header({
					node: document.getElementById("weheader"), 
				});
   				frame.footer({
					node: document.getElementById("wefooter"), 
					index: 3
   				});
   				
   				
   				var btnArray = ['确认', '取消'];
				$("#noticeList").on('slideleft', '.mui-table-view-cell', function(event) {
					var elem = this;
					mui.confirm('确认删除该条记录？', "", btnArray, function(e) {
						if (e.index == 0) {
						    var id = elem.id;
							wenet.weforward("removeNotice", {
								id: id
							}, function(result) {
								if(result != null && result.code == 1){
									elem.parentNode.removeChild(elem);
								}else{
									setTimeout(function() {
										$.swipeoutClose(elem);
									}, 0);
									mui.toast("删除失败!<br/>" + result.msg);
								}
							});
						} else {
							setTimeout(function() {
								$.swipeoutClose(elem);
							}, 0);
						}
					});
				});
			})(mui);
		</script>
	</body>

</html>